<style>
    .is-danger {
        color: red
    }
</style>
<form id="upload_form" method="get" action="" @submit.prevent="validateBeforeSubmit">
    <div class="forom-group">
        <input type="date" class="form-control" placeholder="时间" v-model="date" v-validate="'required'" name="date"/>
        <span v-show="errors.has('date')" class="help is-danger">{{ errors.first('date') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <label>快递公司</label>
        <select class="form-control" v-model="express_id">
            <?php foreach ($this->params['express'] as $v) : ?>
                <option value=<?php echo $v['id']; ?>><?php echo $v['name']; ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="客户编号" class="form-control" v-model="customer_number" v-validate="'required'"
               name="customer_number"/>
        <span v-show="errors.has('customer_number')" class="help is-danger">{{ errors.first('customer_number') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="客户名称" class="form-control" v-model="customer_name" v-validate="'required'"
               name="customer_name"/>
        <span v-show="errors.has('customer_name')" class="help is-danger">{{ errors.first('customer_name') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="Invoice" class="form-control" v-model="invoice_order" v-validate="'required'"
               name="invoice_order"/>
        <span v-show="errors.has('invoice_order')" class="help is-danger">{{ errors.first('invoice_order') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="发往国家" class="form-control" v-model="country"/>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="发件渠道" class="form-control" v-model="express_channel"/>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="单号" class="form-control" v-model="tradeno" v-validate="'required'"
               name="tradeno"/>
        <span v-show="errors.has('readeno')" class="help is-danger">{{ errors.first('tradeno') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="转单号" class="form-control" v-model="to_tradeno"/>
    </div>
    <br/>
    <div class="forom-group">
        <input type="number" placeholder="件数" class="form-control" v-model="num"/>
    </div>
    <br/>
    <div class="forom-group">
        <input type="number" placeholder="重量" class="form-control" v-model="weight"/>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="单价" class="form-control" v-model="per_kg" v-validate="'required'"
               name="per_kg"/>
        <span v-show="errors.has('per_kg')" class="help is-danger">{{ errors.first('per_kg') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="number" placeholder="运费" class="form-control" v-model="fee" v-validate="'required'" name="fee"/>
        <span v-show="errors.has('fee')" class="help is-danger">{{ errors.first('fee') }}</span>
    </div>
    <br/>
    <div class="forom-group">
        <input type="text" placeholder="备注信息" class="form-control" v-model="remark"/>
    </div>
    <br/>
    <input class="btn btn-success" type="submit" value="提交">
</form>

<script>
    Vue.use(VeeValidate);
    var vm = new Vue({
        el: "#upload_form",
        data: {
            date: "",
            express_id: 1,
            customer_name: "",
            customer_number: "",
            country: "",
            express_channel: "",
            tradeno: "",
            to_tradeno: "",
            num: '',
            weight: '',
            per_kg: "",
            fee: '',
            remark: "",
            invoice_order: ""
        },
        methods: {
            validateBeforeSubmit: function () {
                this.$validator.validateAll().then((res) => {
                    if (res) {
                        var data = vm.$data;
                        layer.confirm('确认提交', {}, function () {
                            $.post('/table/ajax_add_express', {
                                data: data
                            }, function (res) {
                                if (res.code == 1) {
                                    layer.confirm(res.msg, {}, function () {
                                        window.location.reload();
                                    })
                                } else {
                                    layer.alert(res.msg);
                                }
                            }, 'json');
                        })
                    }
                })
            }
        }
    });


</script>